<template>
    <div>
           <div class="top"> <span style="color:darkred;font-size: 18px;"> {{ queryName }} </span> 小区户型 </div> 
           <van-search
            v-model="search_value"
            shape="round"
            background="#4fc08d"
            placeholder="输入小区/户型关键词"
            @search="onSearch"
            v-if="isSearch"
            />
           <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(item,index) in curArray" :key="item.building" :text="item.building">               
                     <van-image
                        :src="item.pic"
                        @click="handleShow([item.pic], index)"
                        />
                        <span> {{ item.pic.replace('https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/apartment\/', '').replace('.jpg','').replace('.png','').replace('https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/apartment\/', '') }} </span>
                </van-grid-item>    
            </van-grid>
               
    </div>



</template>

<script setup>
import { ref, reactive, onMounted, computed, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import { ImagePreview } from 'vant';
import  getArray  from './data/complex.js'
import { Toast } from 'vant';

const route = useRoute();
const queryName = ref(route.query.name) // todo 获取小区名字
const areaIndex = route.query.mainIndex
let curArray = ref([]) // 界面数组
let search_value = ref('') // 搜索数组 
let isSearch = ref(false)

// regName = computed(function(){
//             return person.firstName + '-' + person.lastName
//     }) /\bis\b/


 const handleShow = (item, index)=>{
    console.log('弹出层', item)
    ImagePreview({
        images:item,
        closeable: true,
        // startPosition: index,
    });
 }
 // 查询处理
  const onSearch = async(val) => {
     const db = cloud.database();  
     const _ = db.command;
     await db.collection('housing').where(             
                _.or([
                    {
                        "commu": val,   // 根据小区名查询小区户型
                        "isValid": true   // 审核通过的小区
                    },
                    {
                       "building": val,  // 根据户型名称查询小区户型
                       "isValid": true   // 1
                    }
                    ])
               ).get().then(res=>{
                        console.log('返回本小区XXXX', res)
                        curArray.value = res.data    
                }).catch(error=>{
                    console.log('未成功', error)
                })
  }

 onMounted(async()=>{
    // let queryName2 = ref(route.query.name) // todo 获取小区名字
    const db = cloud.database();  
    const _ = db.command
    const $ = db.command.aggregate;
    let areaDict = ['北区', '南区', '中区']
    // console.log('cccccc', areaIndex, queryName2 )
    let getComplexData = getArray()  // 后续换成数据库查询 todo...........
    if(queryName.value=='search'){
        // console.log('12121212')
       setTimeout(()=>{  queryName.value = '查询' 
        isSearch.value = true
       }, 100)
       
    }else{
            console.log('QQQUERY', queryName.value)
            let complexDataServer =  await db.collection('housing').where({
                    "commu": queryName.value,
                    "isValid": true   // 审核通过的小区
               }).get().then(res=>{
                        console.log('返回本小区XXXXA', res)
                        curArray.value = res.data    
                        // alert('上传成功')                 // !!数据库返回当前小区户型信息!!
                }).catch(error=>{
                    // alert('未成功', error)
                })
            // curArray.value = getComplexData[areaDict[areaIndex]][queryName]
            console.log(curArray.value)
            let plexArea = ''   // 区域
            let plexSocial = ''  // 小区
            let plexBuild = ''   // 座数
            let distritArray = {}   
            for(var item in getComplexData){   // 实验操作，对界面并无什么影响
                console.log(item, ":", getComplexData[item])
                plexArea  = item
                for( var dic in getComplexData[item] ) {
                    // console.log('SEC ',plexArea, dic, typeof( getComplexData[item][dic] ) )
                    // let distritArray = Object.keys( getComplexData[item][dic] ) 
                    // console.log('压缩曾', Object.values( getComplexData[item][dic] ))
                    // if(distritArray.length>0) {
                        // console.log('压缩', distritArray)
                    distritArray = Object.values( getComplexData[item][dic] )
                    distritArray.forEach(async(element) => {
                        plexSocial = dic
                        plexBuild = element.replace('https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/apartment\/', '').replace('.jpg','').replace('.png','')
                        plexBuild = element.replace('https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/apartment\/', '').replace('.jpg','').replace('.png','')
                        // https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/apartment/
                        // console.log('图片参数', plexArea, plexSocial, element, plexBuild)
                        // await db.collection('housing').add({
                        //         "district": plexArea,
                        //         "commu": plexSocial,
                        //         "building": plexBuild,
                        //         "pic": element
                        //     }).then(res=>{
                        //         console.log('提交@@@@', res)
                        // })
                    });
            
                    // for( let initem of getComplexData[item][dic] ){
                    //     console.log('==============Trid')
                    // }

                    }
           
                }
    }

    
    } )

    const cloud = inject('$cloud')


</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 100%;
    }
</style>